<template>
	<view class="content">
		<calendar 
			ref="calendar"
			@changeMonth="changeMonth"
			@change="changeDate"
			:dots="monthLessons"
			></calendar>
		<view class="course-today">
			<view class="course-today-item" v-if="todayList.length == 0">
				<view class="course-today-item-none">{{ chooseDay }}没有课哦~</view>
			</view>
			<view class="course-today-item" v-else v-for="(item, index) in todayList" :key="index">
				<view class="course-today-item-name">{{ item.detail_title }}</view>
				<view class="course-today-item-info" v-if="item.schedule && item.end_time*1000 > now">
					进行到{{ item.schedule }}丨下次上课 &nbsp; {{ item.month }}月{{ item.day }}日 &nbsp; {{ item.time }}
				</view>
				<view class="course-today-item-info" v-else>进行到{{ item.schedule }}丨已完结</view>
			</view>
		</view>
		<view class="course-all-title">
			<view class="course-all-name">我的课程</view>
			<view class="course-all-nav">
				<view class="course-all-nav-state" @tap="navClick(1)">{{state}}</view>
				<view class="course-all-nav-state" @tap="navClick(2)">{{subject}}</view>
				<view class="course-all-nav-state" @tap="navClick(3)">{{type}}</view>
			</view>
		</view>
		<view class="pop" v-if="stateIf">
			<view class="popItem" v-for="(item,index) in stateList" :key="index" @tap="itemClick(index,item.name,1)" :class="stateIndex == index ? 'activeColor':''">
				{{item.name}}<i v-if="stateIndex == index" class="iconfont iconqueding"></i>
			</view>
		</view>
		<view class="pop" v-if="subjectIf">
			<view class="popItem" v-for="(item,index) in subjectList" :key="index" @tap="itemClick(index,item.subject_name,2)" :class="subjectIndex == index ? 'activeColor':''">
				{{item.subject_name}}<i v-if="subjectIndex == index" class="iconfont iconqueding"></i>
			</view>
		</view>
		<view class="pop" v-if="typeIf">
			<view class="popItem" v-for="(item,index) in typeList" :key="index" @tap="itemClick(index,item.name,3)" :class="typeIndex == index ? 'activeColor':''">
				{{item.name}}<i v-if="typeIndex == index" class="iconfont iconqueding"></i>
			</view>
		</view>
		<view class="course-all-list">
			<view class="course-all-none" v-if="lessonList.length == 0">
				<image src="../../static/image/lesson-none.png"></image>
				<view class="course-all-none-text">暂无订单~</view>
			</view>
			<view class="summary-wrap">
				<view class="item" v-for="(item, index) in lessonList" :key="index">
					<v-course-summary mclass="lesson-card" :item='item' :istyle="'background: #FFF;'" :iend="!!stateIndex"></v-course-summary>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from '../free-lesson/components/calendar/week-calendar'
	import courseSummary from './components/course-summary'
	import util from '@/common/util.js'
	export default{
		components: {
			calendar,
			vCourseSummary: courseSummary
		},
		data() {
			var _today = new Date().format('M月d日')
			return {
				user_id: uni.getStorageSync('currentChild').student_id,
				course_id: 0,
				month: 5,
				todayList: [],
				chooseDay: _today,
				lessonList: [],
				// lessonList: [],
				monthLessons: {},
				// state: '状态',
				state: '未开始',
				gradeList: [],	// 年级列表
				// 应开发要求，全部不好做，默认使用一个未开始，并去除‘全部’ 的筛选
				stateList: [
					{num:'1',name:'未开始'},
					{num:'2',name:'已结课'}
				],
				// 日期校验，用于判断课程是否已经完结
				now: +new Date(),
				stateIf: false,
				stateIndex: 0,
				subject: '科目',
				subjectList: [],
				subjectIf: false,
				subjectIndex: '',
				type: '类型',
				typeList: [
					{num:'0',name:'全部'},
					{num:'2',name:'常规班'},
					{num:'3',name:'技巧班'},
					{num:'1',name:'免费班'},
					{num:'4',name:'考前冲刺'}
				],
				typeIf: false,
				typeIndex: 0,
				no_first: true		// 初次加载
			}
		},
		onPullDownRefresh(){
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			// 获取孩子id
			var data = uni.getStorageSync('currentChild')
			this.user_id = data.student_id;
			this.getSubject();
			this.getOrderLesson();
		},
		methods: {
			/* 获取科目 */
			getSubject() {
				this.$zbapi.apiPost('common/subject').then(res=>{
					console.log("subject ids ==> ",res)
					if(res.data.code == 0) {
						let sub_obj = {}
						res.data.data.forEach((item, index) => {
							sub_obj[item.subject_id] = item.subject_name
						})
						this.subjectList = res.data.data
						uni.setStorageSync('zbSubjectArr', res.data.data) // 缓存一份科目数组，以便后续使用
						uni.setStorageSync('zbSubject', sub_obj)
						this.subjectList.unshift({
							subject_name: "全部",
							subject_id: ''
						})
					} else {
						this.subjectList = [];
					}
				})
			},
			navClick(type) {
				// type=1 状态  type=2 科目  type=3 类型
				if(type == 1) {
					this.stateIf = !this.stateIf;
					this.subjectIf = false;
					this.typeIf = false;
				} else if(type == 2) {
					this.subjectIf = !this.subjectIf;
					this.stateIf = false;
					this.typeIf = false;
				} else if(type == 3) {
					this.typeIf = !this.typeIf;
					this.stateIf = false;
					this.subjectIf = false;
				}
			},
			// 点击筛选
			itemClick(index,name,type) {
				// type=1 状态  type=2 科目  type=3 类型
				if(type == 1) {
					this.stateIndex = index;
					this.state = name;
					this.stateIf = false;
				} else if(type == 2) {
					this.subjectIndex = index;
					this.subject = name;
					this.subjectIf = false;
				} else if(type == 3) {
					this.typeIndex = index;
					this.type = name;
					this.typeIf = false;
				}
				this.getOrderLesson()
			},
			// 获取当前选择的日期 data{year: 2020, month: 1, date: 1}
			changeDate(data){
				this.todayList = []
				this.chooseDay = `${data.month}月${data.date}日`
				if(this.monthLessons[data.date]){
					// 保留日期数据映射表
					this.todayList = this.monthLessons[data.date].map(x=>({...x, time: [new Date(x.start_time * 1000).format('HH:mm'), new Date(x.end_time * 1000).format('HH:mm')].join('-')}))
				}
			},
			// 修改日历月份 data{year: 2020, month: 1}
			changeMonth(data){
				var today = new Date()
				this.monthLessons = {}
				this.chooseDay = `${data.month}月1日`
				this.getLessons(data.year, data.month)
				if(!this.no_first){
					var _today = new Date();
					this.changeDate({year: _today.getFullYear(), month: _today.getMonth() + 1, date: _today.getDate()})
					this.no_first = true
				}
			},
			// 获取订单课程表
			getOrderLesson(){
				var data={
					user_id: this.user_id,
					is_end: this.stateIndex,	// 默认查未完结，后台说不能查全部
					limit: '',
					page: ''
				};
				if(this.subjectIndex!=0){
					data.subject_id=this.subjectIndex;
				}
				if(this.typeIndex!=0){
					data.kind_id = this.typeList[this.typeIndex].num;
				}
				this.$zbapi.apiPost('parent/order/course',data ).then(res=>{
					this.lessonList = res.data.data.list.map(item=>({
						...item,
						teach_day: new Date(item.start_time * 1000).format('MM.dd'),
						teach_time: [new Date(item.start_time * 1000).format('HH:mm'), new Date(item.end_time * 1000).format('HH:mm')].join('-'),
						subject_name: uni.getStorageSync('zbSubject')[item.subject_id],
						figureimgsList: !item.figureimgs ? [] : item.figureimgs.split(',')
					}))
				})
			},
			// 可以直接传入一个，获取月度课表
			getLessons(year,month){
				var date = !(arguments.length - 1) && year;
				this.$zbapi.apiPost('parent/order/schedule',{
					user_id: this.user_id,
					year: date ? new Date().getFullYear() : year,
					month: date ? new Date().getMonth() + 1 : month
				}).then(res=>{
					if(res.data.code == 0){
						if(Array.isArray(res.data.data) && res.data.data.length){
							this.monthLessons = {}
							res.data.data.forEach(x=>{
								if(this.monthLessons[x.day]){
									this.monthLessons[x.day].push(x)
								}else{
									this.monthLessons[x.day] = [x]
								}
							})
							console.log('finished ==> ', this.monthLessons)
							// 更新日历月份
							this.$refs.calendar.renderDay()
						}else{
							console.error('异常数据格式~ =：', res.data.data)
						}
					}
				})
			}
		},
		// 加载更多
		onReachBottom() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7F7F7;
	}
	.top{
		width: 100%;
		height: 290upx;
		background: #fe9900;
		.top-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;
			.top-title-month{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				& i{
					font-size: 20upx;
				}
				.top-title-month-name{
					font-size: 36upx;
					margin: 0 30upx;
				}
			}
			.top-title-today{
				font-size: 30upx;
			}
		}
		.top-week{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;
			margin-top: 20upx;
			.top-week-day{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
	.course-today{
		width: calc(100% - 60upx);
		margin: -50upx 30upx 0;
		.course-today-item{
			width: calc(100% - 60upx);
			padding: 20upx 30upx;
			min-height: 110upx;
			margin-bottom: 20upx;
			background: #FFFFFF;
			border-radius: 20upx;
			box-shadow: 0 6upx 12upx rgba(0,0,0,0.05);
			.course-today-item-none{
				color: #999999;
				font-size: 32upx;
				text-align: center;
				line-height: 110upx;
			}
			.course-today-item-name{
				font-family:Source Han Sans CN;
				font-weight:500;
				line-height: 58upx;
				color: #333333;
				font-size: 34upx;
			}
			.course-today-item-info{
				font-family:Source Han Sans CN;
				font-weight:400;
				line-height: 40upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999999;
				font-size: 24upx;
			}
		}
	}
	.course-all-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30upx;
		.course-all-name{
			color: #333333;
			font-size: 36upx;
			font-weight: bold;
		}
		.course-all-name:before{
			content: '|';
			width: 2upx;
			height: 34upx;
			color: #fe9900;
			margin: 0 10upx;
		}
		.course-all-nav{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.course-all-nav-state{
				font-family:Source Han Sans CN;
				font-weight:400;
				line-height:46upx;
				color: #333333;
				display: flex;
				align-items: center;
			}
			.course-all-nav-state:after{
				content: '';
				border-width: 10upx;
				border-color: #666666;
				border-bottom-width: 0;
				border-style: dashed;
				border-bottom-style: solid;
				border-left-color: transparent;
				border-right-color: transparent;
				margin: 0upx 30upx 0 12upx;
			}
		}
	}
	.pop{
		width: 100%;
		.popItem{
			color: #666666;
			width: calc(100% - 80upx);
			padding: 0 40upx;
			height: 88upx;
			line-height: 88upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2upx solid #E5E5E5;
		}
		.activeColor,
		& i{
			color: #fe9900;
		}
	}
	.course-all-list{
		width: calc(100% - 60upx);
		margin: 0 30upx 100upx;
		.course-all-none{
			width: 100%;
			text-align: center;
			margin-top: 100upx;
			& image{
				width: 266upx;
				height: 180upx;
			}
			.course-all-none-text{
				color: #999999;
				font-size: 30upx;
			}
		}
		.course-all-item{
			width: calc(100% - 60upx);
			padding: 0 30upx;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-top: 20upx;
			.all-item-sub{
				color: #FFFFFF;
				font-size: 26upx;
				background: #fe9900;
				padding: 0 6upx;
				line-height: 1;
				border-radius: 0 0 8upx 8upx;
			}
			.all-item-info{
				display: flex;
				justify-content: space-between;
				.all-item-name{
					color: #333333;
					font-size: 36upx;
					max-width: 70%;
				}
				.all-item-time{
					color: #666666;
					margin-top: 10upx;
				}
				.all-item-len{
					color: #999999;
					font-size: 26upx;
				}
				.all-item-text{
					color: #666666;
				}
			}
			.all-item-img{
				padding: 30upx 0;
				& image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin-right: 18upx;
				}
			}
		}
	}
	.competitive-wrap{margin-top:12upx; padding:0 30upx;}
	.summary-wrap{display:flex; justify-content: space-between; flex-wrap:wrap;}
	.summary-wrap .item{width:100%;}
	.summary-wrap .item:first-child{margin-top: 36upx;}
</style>